import 'package:dingtalk/core/model/message_setting_model.dart';
import 'package:dingtalk/core/values/values.dart';
import 'package:dingtalk/mock/mock_message.dart';
import 'package:dingtalk/ui/screens/message/message_setting_screen.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:modal_bottom_sheet/modal_bottom_sheet.dart';

class THMessageTopMask extends StatefulWidget {
  @override
  _THMessageTopMaskState createState() => _THMessageTopMaskState();
}

class _THMessageTopMaskState extends State<THMessageTopMask> {
  List<THMessageSettingModel> _topMasks = [];
  List<Widget> _topMaskItems = [];

  @override
  void initState() {
    _topMasks = THMockMessage.messageSettingItems;
    _topMasks.forEach((element) {
      if (element.isOpened == 1) {
        _topMaskItems.add(GestureDetector(
          child: SvgPicture.asset(
            element.iconPath,
            width: kSize38,
            color: element.hasUnRead == 1
                ? element.activeColor
                : element.normalColor,
          ),
          onTap: () {
            _handleShowMaskContent(element);
          },
        ));
      }
    });
    super.initState();
  }

  _handleShowMaskContent(THMessageSettingModel model) {
    showMaterialModalBottomSheet(
      context: context,
      builder: (BuildContext context, ScrollController scrollController) {
        return Container(
          height: kSize800,
          padding: EdgeInsets.symmetric(vertical: kSize20, horizontal: kSize20),
          child: Column(
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[Icon(Icons.close), Text("data")],
              )
            ],
          ),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Padding(
          padding: EdgeInsets.symmetric(vertical: kSize32),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Container(
                width: kSize160,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    SvgPicture.asset(
                      'assets/icons/icon_computer.svg',
                      width: kSize38,
                      height: kSize38,
                    ),
                    Container(
                      width: kSize1,
                      height: kSize38,
                      margin: EdgeInsets.only(left: kSize36),
                      color: kColorECEDED,
                    )
                  ],
                ),
              ),
              Expanded(
                child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: _topMaskItems),
              ),
              GestureDetector(
                child: Container(
                  width: kSize160,
                  alignment: Alignment.centerRight,
                  padding: EdgeInsets.only(right: kSize24),
                  child: SvgPicture.asset(
                    'assets/icons/icon_more.svg',
                    width: kSize38,
                    color: kColor99,
                  ),
                ),
                onTap: () {
                  Navigator.push(context,
                      MaterialPageRoute(builder: (BuildContext context) {
                    return THMessageSettingScreen();
                  }));
                },
              ),
            ],
          ),
        ),
        Divider(height: kSize1, color: kColorECEDED, indent: kSize36)
      ],
    );
  }
}
